<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>源辰-零食网</title>
<meta name="keywords" content="小吃,美食,零食,源辰" />
<meta name="description" content="各种小吃美食，应有尽有" />
<!-- 添加自适应头部声明，默认宽度跟设备宽度一样，缩放比例为不缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="images/yc.png" rel="shortcut icon" type="image/x-icon" />
<!-- 当设备媒体的屏幕分辨率宽度大于等于800px时 -->
<link media="only screen and (min-width: 800px)"  href="css/index.css" rel="stylesheet" type="text/css" />
<!-- 当设备媒体的屏幕分辨率宽度小于800px时 -->
<link media="only screen and (max-width: 800px)"  href="css/v_index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header id="header">
	<div class="header_title">
		<a href="#" target="_blank" class="location">衡阳</a>
		
		<div class="header_info">
			<div class="login_info">
				<a v-if="checkLogin" href="login.html" target="_blank" title="点击登录" >您好，[{{user.nickName}}]</a>
				<a v-else href="front/login.htnl" target="_blank" title="点击登录" >您好,请先登录</a>
				<a href="register.html" target="_blank" title="点击注册">免费注册</a>
			</div>
			
			<div class="person_info">
				<span>|</span>
				<a href="front/order.html" target="_blank" href="order.html">我的订单</a>
				<span>|</span>
				<a href="" target="_blank">我的收藏</a>
				<span>|</span>
				<a href="" target="_blank">客服服务</a>
				<span>|</span>
				<a href="user.html" target="_blank">个人信息</a>
			</div>
		</div>
	</div>
	
	<!-- 搜索区域  -->
	<div class="search">
		<div class="search_left">
			<a href="index.html" title="首页">
				<img src="images/logo.png" />
			</a>
			
		</div>
		
		<div class="search_center">
			<div class="search_div">
				<input type="search" placeholder="请输入您要搜索的内容..." v-model="keywords"/>
				<input type="button" value="搜  索" />
			</div>
		</div>
		
		<div class="search_right">
			<i>{{count}}</i>
			<a href="front/cart.html" target="_blank">我的购物车</a>
		</div>
	</div>
	
	<!-- 类型导航 -->
	<div class="nav">
		<a href="javascript:void(0)" :class="{selected: tno == ''}" @click="findByType('')">全部</a>
		<a :class="{selected: tno == item.tno}" v-for="item in types" href="javascript:void(0)" 
			@click="findByType(item.tno)">{{item.tname}}</a>
	</div>
	
	<div class="v_nav">
		<ul>
			<li v-for="item in types" @click="findByType(item.tno)">
				<img :src="'../' + item.pic" />
				<span :class="{selected: tno == item.tno}">{{item.tname}}</span>
			</li>
		</ul>
	</div>
</header>

<article id="app">
	<div class="slide">
		<ul id="slide">
			<li><a href="#" target="_blank"><img src="images/slide01.jpg" alt="" /></a></li>
			<li><a href="#" target="_blank"><img src="images/slide02.jpg" alt="" /></a></li>
			<li><a href="#" target="_blank"><img src="images/slide03.jpg" alt="" /></a></li>
			<li><a href="#" target="_blank"><img src="images/slide04.jpg" alt="" /></a></li>
			<li><a href="#" target="_blank"><img src="images/slide05.jpg" alt="" /></a></li>
		</ul>
		<div class="pre"></div>
		<div class="next"></div>
		<ul class="pointer" id="pointer">
			<li class="active"></li><li></li><li></li><li></li><li></li>
		</ul>
	</div>
	
	<div class="order">
		<a href="" class="">价格</a>
		<input type="number" min="1" class="price_ipt" />
		<span>-</span>
		<input type="number" min="1" class="price_ipt" />
	</div>
	
	<div class="product_view">
		<ul>
			<li v-if="products.length == 0">
				暂无数据
			</li>
			<li v-else class="product_item" v-for="item in products">
				<i class="all_i i_t"></i>
				<i class="all_i i_r"></i>
				<i class="all_i i_b"></i>
				<i class="all_i i_l"></i>
				<a :href="'detail.html?' + item.pno " target="_blank" class="hot_warp">
					<img :src="'../' + item.pic" title="好吃" />
					<span>{{item.pname}}</span>
				</a>
				
				<div class="buy_view">
					<span class="price">{{item.price}}</span>
					<span class="weight"> / {{item.weight}}</span>
					<span class="buy"></span>
				</div>
			</li>
		</ul>
	</div>
	
	<div class="page_info">
		<a href="javascript:void(0)" :class="{selected:page == 1}" @click="finds(1)">首页</a>
		<a href="javascript:void(0)" :class="{selected:i == page}" v-for="i in totalPage" @click="finds(i)">{{i}}</a>
		<a href="javascript:void(0)" :class="{selected:page == totalPage}" @click="finds(totalPage)">尾页</a>
	</div>
</article>

<footer>
	<div class="foot_link">
		<a href="#" target="_blank">关于我们</a><span>|</span>
		<a href="#" target="_blank">联系我们</a><span>|</span>
		<a href="#" target="_blank">招聘广告</a><span>|</span>
		<a href="#" target="_blank">友情链接</a>
	</div>
	
	<p>CopyRight &copy; 2023 <a href="http://www.hyycinfo.com" target="_blank">衡阳市源辰信息科技有限公司</a> All Rights Reservered</p>
	<p>电话：0734-8355998  湘ICP备888666号-1</p>
</footer>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/show-dialog.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<script type="text/javascript" src="js/hander.js"></script>
<script type="text/javascript">
window.onload = function() {
	let images = document.getElementById("slide").getElementsByTagName("li"); // 获取id="slide"对象
	let len = images.length; // 获取图片的数量
	// console.info(len);
	let i = 0;
	
	let pointers = document.getElementById("pointer").getElementsByTagName("li");
	setInterval(function(){
		i = ++ i % len;
		
		for (let j = 0; j < len; ++ j) {
			if (i == j) {
				images[j].style.display = "block";
				pointers[j].className = "active";
			} else {
				images[j].style.display = "none";
				pointers[j].removeAttribute("class");
			}
		}
	}, 2000); // 每隔2秒钟执行函数一次
}

let rows = 10;
let tno = "";
let app = new Vue({
	el:"#app",
	data: {
		products: [],
		totalPage: 0,
		page: 1
	},
	mounted: function() {
		this.findByFirst();
	},
	methods: {
		findByFirst: function() {
			axios.post("goods/findByFirst", qs.stringify({page: 1, rows: rows, tno: tno})).then(rt => {
				if(rt.data.code = 200) {
					console.log(rt.data.data.goods);
					this.products = rt.data.data.goods;
					this.totalPage = Math.ceil(rt.data.data.total / rows);
					console.info(this.products )
					return;
				}
				this.products = [];
				this.totalPage = 0;
			})
		},
		finds: function(flag){
			if(this.page == flag){
				return;
			}
			this.page = flag;
			axios.post("goods/finds", qs.stringify({page: flag, rows: rows, tno: tno})).then(rt => {
				if(rt.data.code = 200){
					this.products = rt.data.data;
					return;
				}
				this.products = [];
			})
		}
	}
})

	
</script>
</body>
</html>